<template>
  <div class="container">
    <div ref="table" class="table">
      <div v-if="this.empInfoData.name">
        <h3>教练员信息</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <tr>
            <td>身份证</td>
            <td colspan="6" name="IDNum">{{empInfoData.IDNum||'-'}}</td>
            <td rowspan="4" name="photo" width="150px">
              <img :src="empInfoData.photo" style="width: 100px;"></image>
            </td>
          </tr>
          <tr>
            <td>姓名</td>
            <td name="name">{{empInfoData.name||'-'}}</td>
            <td>性别</td>
            <td name="gender">{{empInfoData.gender||'-'}}</td>
          </tr>
          <tr>
            <td>出生日期</td>
            <td name="birthday">{{empInfoData.birthday||'-'}}</td>
            <td>工作类型</td>
            <td name="empType">{{empInfoData.empType||'-'}}</td>
          </tr>
          <tr>
            <td>运动大项</td>
            <td name="sport">{{empInfoData.sport||'-'}}</td>
            <td>运动小项</td>
            <td name="sportItem">{{empInfoData.sportItem||'-'}}</td>
          </tr>
        </table>
      </div>
      <div v-if="empDetailData">
        <h3>详细信息</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <tr>
            <td>现在住址</td>
            <td name="name">{{empDetailData.address||'-'}}</td>
            <td>联系电话</td>
            <td name="gender">{{empDetailData.phone||'-'}}</td>
          </tr>
          <tr>
            <td>邮箱</td>
            <td name="birthday">{{empDetailData.email||'-'}}</td>
            <td>政治面貌</td>
            <td name="empType">{{empDetailData.political||'-'}}</td>
          </tr>
          <tr>
            <td>受教育程度</td>
            <td name="sport">{{empDetailData.eduction||'-'}}</td>
            <td>注册号</td>
            <td name="sportItem">{{empDetailData.enrollId||'-'}}</td>
          </tr>
          <tr>
            <td>国家</td>
            <td name="sport">{{empDetailData.culture||'-'}}</td>
            <td>注册地</td>
            <td name="sportItem">{{empDetailData.enroll||'-'}}</td>
          </tr>
          <tr>
            <td>籍贯</td>
            <td name="sport">{{empDetailData.nativePlace||'-'}}</td>
            <td>工资类型</td>
            <td name="sportItem">{{empDetailData.wageLevel||'-'}}</td>
          </tr>
          <tr>
            <td>入职时间</td>
            <td name="sport">{{empDetailData.workDate||'-'}}</td>
            <td>执教时间</td>
            <td name="sportItem">{{empDetailData.teachDate||'-'}}</td>
          </tr>
          <tr>
            <td>职位/职务</td>
            <td name="sport">{{empDetailData.professionType||'-'}}</td>
            <td>在职状态</td>
            <td name="sportItem">{{empDetailData.empStatus||'-'}}</td>
          </tr>
        </table>
      </div>
      <div v-if="empFamilyData.length != 0">
        <h3>家庭成员</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>姓名</th>
              <th>称谓</th>
              <!-- <th>出生日期</th>
              <th>政治面貌</th> -->
              <th>工作单位</th>
              <!-- <th>工作岗位</th> -->
              <th>联系电话</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empFamilyData" :key="index">
              <td>{{item.name||'-'}}</td>
              <td>{{item.appellation||'-'}}</td>
      <!--        <td>{{item.birthday||'-'}}</td>
              <td>{{item.political||'-'}}</td> -->
              <td>{{item.Work||'-'}}</td>
              <!-- <td>{{item.post||'-'}}</td> -->
              <td>{{item.phone||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="empLanguageData.length != 0">
        <h3>外语水平</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>语言种类</th>
              <th>语言等级</th>
              <th>熟练程度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empLanguageData" :key="index">
              <td>{{item.language||'-'}}</td>
              <td>{{item.languageLevel||'-'}}</td>
              <td>{{item.skillLevel||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="empOfficeHistoryData.length != 0">
        <h3>任职经历</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>开始日期</th>
              <th>结束日期</th>
              <th>任职单位</th>
              <th>职位/职务</th>
              <th>职称等级</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empOfficeHistoryData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.profession||'-'}}</td>
              <td>{{item.positionalLevel||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="empEducationData.length != 0">
        <h3>教育经历</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>开始日期</th>
              <th>结束日期</th>
              <th>学校名称</th>
              <th>受教育程度</th>
              <th>专业</th>
              <th>学位</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empEducationData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.schoolName||'-'}}</td>
              <td>{{item.educationType||'-'}}</td>
              <td>{{item.major||'-'}}</td>
              <td>{{item.eductionLevel||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="empPaperData.length != 0">
        <h3>学术论文著作</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>发表时间</th>
              <th>论文题目</th>
              <th>发表刊物</th>
              <th>成绩</th>
              <th>国际标准期刊编号</th>
              <th>第几作者</th>
              <th>总人数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empPaperData" :key="index">
              <td>{{item.publishDate||'-'}}</td>
              <td>{{item.name||'-'}}</td>
              <td>{{item.periodical||'-'}}</td>
              <td>{{item.grade||'-'}}</td>
              <td>{{item.issn||'-'}}</td>
              <td>{{item.noWriter||'-'}}</td>
              <td>{{item.total||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="empRefereeData.length != 0">
        <h3>裁判等级</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>获得日期</th>
              <th>裁判等级</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empRefereeData" :key="index">
              <td>{{item.createDate||'-'}}</td>
              <td>{{item.refereeType||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        <div v-if="empRewardPunishmentData.length != 0">
          <h3>荣誉和奖励</h3>
          <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
            <thead>
              <tr>
                <th>时间</th>
                <th>奖罚类型</th>
                <th>考核/授奖单位</th>
                <th>等级/称号</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item,index in empRewardPunishmentData" :key="index">
                <td>{{item.createDate||'-'}}</td>
                <td>{{item.rpType||'-'}}</td>
                <td>{{item.orgName||'-'}}</td>
                <td>{{item.level||'-'}}</td>
                <td>{{item.comment||'-'}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="empFurtherEducationData.length != 0">
        <h3>进修培训</h3>
        <table border="2" style="border-collapse: collapse;width: 100%;color: #000000;text-align: center;" bordercolor="#000">
          <thead>
            <tr>
              <th>开始日期</th>
              <th>结束日期</th>
              <th>进修及培训内容</th>
              <th>主办单位</th>
              <th>培训等级</th>
              <th>培训课时</th>
              <th>考试成绩</th>
              <th>培训地址</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in empFurtherEducationData" :key="index">
              <td>{{item.openDate||'-'}}</td>
              <td>{{item.closeDate||'-'}}</td>
              <td>{{item.content||'-'}}</td>
              <td>{{item.orgName||'-'}}</td>
              <td>{{item.level||'-'}}</td>
              <td>{{item.period||'-'}}</td>
              <td>{{item.grade||'-'}}</td>
              <td>{{item.address||'-'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['detailData'],
    data() {
      return {
        empInfoData: {},
        empDetailData: {},
        empFamilyData: [],
        empEducationData: [],
        empRefereeData: [],
        empOfficeHistoryData: [],
        empFurtherEducationData: [],
        empPaperData: [],
        empLanguageData: [],
        empRewardPunishmentData: [],
      }
    },
    watch: {
      detailData() {
        this.initDetailData()
      }
    },
    methods: {
      initDetailData() {
        if (this.detailData) {
          this.empInfoData = this.detailData.emp_basic || {}
          this.empDetailData = this.detailData.emp_detail || {}
          this.empFamilyData = this.detailData.family || []
          this.empEducationData = this.detailData.education || []
          this.empRefereeData = this.detailData.emp_referee || []
          this.empFurtherEducationData = this.detailData.emp_furtherEdu || []
          this.empPaperData = this.detailData.emp_paper || []
          this.empLanguageData = this.detailData.emp_languageLevel || []
          this.empRewardPunishmentData = this.detailData.emp_rewordPunishment || []
          this.empOfficeHistoryData = this.detailData.emp_workExp || []
          this.$emit('cultureResultReturned', this.empInfoData.name)
        }
      },
      tablePrint() {
        const printStyle = `
          table
          {
              width: 100%;
              border-collapse: collapse;
              table-layout:auto!important;
          }
          thead tr{
            font-weight: bold;
          }
          table td, table th
          {
              border: 1px solid #000;
              color: #000;
              height: 40px;
              padding: 10px;
          }
        `
        // setTimeout(() => {
          let content = this.$refs.table
          document.title = this.empInfoData.name+'个人档案'
          this.$XPrint({
            sheetName: '档案打印',
            style: printStyle,
            content: content.innerHTML
          })
        // }, 3000);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #FFFFFF;
    padding: 10px;
    color: #000000;
  }

    h3{
      background-color: #FFFFFF;
      padding: 0;
    }
 table {
   // width: 100%;
   // border-collapse: collapse;

   // // border-spacing: 10px;
   // border: 1px solid #000000;
   // color: #000;
 }

 td,th {
   // border: 1px solid #000;
   // color: #000;
   height: 40px;
   padding: 10px;
   font-size: 21px;
   font-weight: normal;
 }
</style>
